<template>
  <div style="width: 100%;">
    <!-- 头部 -->
    <Header></Header>
    <!-- 内容 -->
    <div id="category">
      <!-- 头部索引 -->
      <div class="top">
        <router-link to="/">首页</router-link>
        &nbsp;&nbsp;>&nbsp;&nbsp;
        <router-link to="/">全部结果</router-link>
      </div>
      <!-- 分类参数选项 -->
      <div class="edition">
        <div class="edition-content">分类：</div>
      </div>
      <!-- 商品展示 -->
      <div class="products">
        <!-- 顶部选项 -->
        <div class="products-select">
          <ul>
            <li>综合</li>
            <li>新品</li>
            <li>销量</li>
            <li style="border: none">价格<i class="el-icon-top"></i></li>
          </ul>
          <div>收货地</div>
        </div>
        <!-- 商品展区 -->
        <div class="products-product">
          <!-- 遍历商品 -->
          <div class="commodity" v-for="(item, index) in projects" :key="item.id"
            @click="project(item.id)"
          >
            <!-- 当前选中的版本的首页图 一个版本对应一个首页图！ -->
            <!-- 让每一个商品的edition下标对应的变量都不一样 -->
            <img :src="item.editions[0].img" alt="" />
            <!-- 商品名(一个) + 版本名(遍历出来) -->
            <div :id="item.id" class="commodity-edition">
              <p>
                <span>{{ item.name }}&nbsp;</span>
                <!-- 初始显示第一个版本 -->
                <span>{{ item.editions[0].name }}</span>
              </p>
              <!-- 当前版本的第一个颜色的价格 -->
              <p>{{ item.editions[0].colors[0].price }}元</p>
            </div>
            <!-- 商品版本(全部遍历) -->
            <div class="icon">
              <img :src="item2.img" alt="" 
                :style="{ border: isSelt == item2.id ? '1px solid #FF6700' : '' }"
                v-for="(item2, index2) in item.editions" :key="item2.id"
                @mouseenter="handleC(item, item2, index, index2)"
              />
            </div>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="ulike">
          <el-divider><h1>猜你喜欢</h1></el-divider>
        </div>
      </div>
    </div>
    <!-- 脚部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { getByCategoryId } from '@/api/shop'

export default {
  data() {
    return {
      //模拟商品数据源（商品数组！！！）
      projects: [],
      //控制选中哪个版本框
      isSelt: 0,
    };
  },
  created() {
    //跳转过来就去获取该分类下所有商品
    getByCategoryId(this.$route.query.categoryId).then((res) => {
        console.log(res.data);
        this.projects = res.data
    }).catch((err) => {
        console.log(err);
    })
  },
  methods: {
    //跳转商品详情
    project(id) {
      this.$router.push({
        path: "/Product",
        query: {
          productId: id,
        },
      });
    },

    //鼠标移入——版本
    handleC(item, item2, index, index2) {
      //选中该版本
      this.isSelt = item2.editionId;
      //获取版本dom，改变版本
      document.getElementById(item.id).firstChild.lastChild.innerHTML = item2.name;
      //获取价格dom，改变价格
      document.getElementById(item.id).lastChild.innerHTML = item2.colors[0].price + "元";
    },
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
#category {
  background-color: #f5f5f5;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.top {
  width: 1200px;
  height: 35px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #757575;

  display: flex;
  align-items: center;
}
.top > a {
  color: #757575;
  text-decoration: none;
}
.top > a:hover {
  color: #ff6600;
}
.edition {
  padding: 20px 0;
  width: 100%;
  background-color: #ffffff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.edition-content {
  width: 1200px;
  height: 35px;
  border: 1px solid black;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.products {
  margin: 15px 0;
  width: 1200px;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.products-select {
  margin: 28px 0;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.products-select > ul {
  list-style-type: none;
}
.products-select > ul > li {
  float: left;
  width: 90px;
  border-right: 1px solid #e0e0e0;
  color: #424242;
  font-size: 15px;
}
.products-product {
  width: 1220px;

  display: flex;
  flex-wrap: wrap;
}
.commodity {
  margin: 10px 10px;
  width: 285px;
  height: 420px;
  background-color: #ffffff;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.commodity:hover {
    cursor: pointer;
    box-shadow: 0 5px 4px 4px rgba(0, 0, 0, 0.12);
}
.commodity:hover >.commodity-edition>p {
    color: #FF6700;
}
.commodity > img {
  width: 141px;
  height: 157px;
  margin: 50px 0 30px;
}
.commodity-edition {
  margin-bottom: 3px;
  font-size: 14px;
  color: #757575;
}
.commodity-edition p:last-child {
  color: #ff6742;
}
.icon {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}
.icon > img {
  margin: 5px;
  padding: 5px;
  width: 25px;
  border: 1px solid #e0e0e0;
}
.ulike {
  width: 100%;
  margin: 100px 0;
}
.el-divider__text {
  background-color: #f5f5f5;
  padding: 0 120px;
  color: #757575;
}
.ulike h1 {
  font-weight: 400;
}
</style>